import {
  Button,
  Descriptions,
  DescriptionsItem,
  Divider,
  FormItem,
  Image,
  ImagePreviewGroup,
  Input,
  message,
  Space,
  Spin,
  TypographyText,
  TypographyTitle
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import serviceProviderApi from '@/apis/serviceProviderApi'
import { editServiceProvider } from '@/apis/serviceProviderTypes'
import { useBack } from '@/hooks/useBack'
import { useDialog } from '@/hooks/useDialog'

import { getRejectTypeStr } from './common'

export default defineComponent({
  name: 'EditRvSupplierDetail',
  setup() {
    const route = useRoute()
    const data = ref({} as editServiceProvider)
    const loading = ref(false)
    const { showConfirm } = useDialog()
    const { handleCancel } = useBack('refreshSupplierList')
    onMounted(() => {
      getApplyDetail()
    })

    async function getApplyDetail() {
      try {
        data.value = await serviceProviderApi.getDetail(route.query.id)
      } finally {
      }
    }
    function cancel() {
      handleCancel()
    }
    async function saveInformation() {
      try {
        btLoading.value = true
        await serviceProviderApi
          .editServiceProvider({
            id: data.value.id,
            bankName: data.value.bankName
          })
          .then(() => {
            handleCancel()
            message.success('保存成功')
          })
      } finally {
        btLoading.value = false
      }
    }
    const btLoading = ref(false)
    return {
      data,
      loading,
      btLoading,
      cancel,
      saveInformation
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Space>
          <TypographyTitle level={3}>服务商资料</TypographyTitle>
          <TypographyText
            v-show={this.data.auditStatus == 0}
            strong
            type="warning"
          >
            待审核
          </TypographyText>
          <TypographyText
            v-show={this.data.auditStatus == 1}
            strong
            type="success"
          >
            审核通过
          </TypographyText>
          <TypographyText
            v-show={this.data.auditStatus == 2}
            strong
            type="danger"
          >
            审核驳回
          </TypographyText>
        </Space>
        <FormItem
          label="拒绝理由"
          style={{ width: '500px' }}
          v-show={this.data.auditStatus == 2}
        >
          <TypographyText>{`${this.data.auditDetail}${getRejectTypeStr(
            this.data.auditDetailType
          )}`}</TypographyText>
        </FormItem>
        <Descriptions bordered column={2}>
          <DescriptionsItem label="营业执照照片">
            {this.data.licenseCopyUrl ? (
              <Image
                style={{ height: '100px' }}
                src={this.data.licenseCopyUrl}
              ></Image>
            ) : (
              '未上传'
            )}
          </DescriptionsItem>
          <DescriptionsItem label="营业执照公司名称">
            {this.data.corporateName}
          </DescriptionsItem>
          <DescriptionsItem label="统一社会信用代码">
            {this.data.licenseNumber}
          </DescriptionsItem>
          <DescriptionsItem label="服务商法人姓名">
            {this.data.legalPerson}
          </DescriptionsItem>
          <DescriptionsItem label="有效期至">
            {this.data.licenseEnd}
          </DescriptionsItem>
          <DescriptionsItem label="所在省市">
            {this.data.licenseProvince
              ? this.data.licenseProvince
              : null + this.data.licenseCity
              ? this.data.licenseCity
              : null + this.data.licenseDistrict
              ? this.data.licenseDistrict
              : null}
          </DescriptionsItem>
          <DescriptionsItem label="详细地址">
            {this.data.licenseAddress}
          </DescriptionsItem>
          <DescriptionsItem label="银行开户许可证">
            {this.data.bankLicenseCopyUrl ? (
              <Image
                style={{ height: '100px' }}
                src={this.data.bankLicenseCopyUrl}
              ></Image>
            ) : (
              '未上传'
            )}
          </DescriptionsItem>
          <DescriptionsItem label="服务商银行开户支行">
            <Input
              maxlength={60}
              v-model:value={this.data.bankName}
              placeholder="请输入"
              style={{ width: '300px' }}
            />
          </DescriptionsItem>
          <DescriptionsItem label="服务商银行账号">
            {this.data.accountNumber}
          </DescriptionsItem>
          <DescriptionsItem label="开户行对应公司主体">
            {this.data.bankCorporateName}
          </DescriptionsItem>
          <DescriptionsItem label="证件照片">
            <ImagePreviewGroup>
              <Space>
                {this.data.idCardCopyUrl ? (
                  <Image
                    style={{ height: '100px' }}
                    src={this.data.idCardCopyUrl}
                  ></Image>
                ) : (
                  '未上传'
                )}
                {this.data.idCardNationalUrl ? (
                  <Image
                    style={{ height: '100px' }}
                    src={this.data.idCardNationalUrl}
                  ></Image>
                ) : (
                  '未上传'
                )}
                {this.data.idCardHoldUrl ? (
                  <Image
                    style={{ height: '100px' }}
                    src={this.data.idCardHoldUrl}
                  ></Image>
                ) : (
                  '未上传'
                )}
              </Space>
            </ImagePreviewGroup>
          </DescriptionsItem>
          <DescriptionsItem label="证件姓名">
            {this.data.idCardName}
          </DescriptionsItem>
          <DescriptionsItem label="身份证号">
            {this.data.idCardNumber}
          </DescriptionsItem>
          <DescriptionsItem label="有效期至">
            {this.data.cardPeriodEnd}
          </DescriptionsItem>
          <DescriptionsItem label="总裁法人姓名">
            {this.data.presidentBankLegalPerson}
          </DescriptionsItem>
          <DescriptionsItem label="总裁银行开户支行">
            {this.data.presidentBankName}
          </DescriptionsItem>
          <DescriptionsItem label="总裁银行账号">
            {this.data.presidentAccountNumber}
          </DescriptionsItem>
          <DescriptionsItem label="账号类型">
            {this.data.bankAccountType === 1 ? '公户账户' : '法人账户'}
          </DescriptionsItem>
          <DescriptionsItem label="申请人联系电话">
            {this.data.applicantMobile}
          </DescriptionsItem>
        </Descriptions>
        <Divider></Divider>
        <Space style={{ marginBottom: '50px' }}>
          <Button
            style={{
              marginLeft: '600px',
              marginRight: '20px'
            }}
            onClick={() => this.cancel()}
          >
            取消
          </Button>
          <Button
            loading={this.btLoading}
            type="primary"
            onClick={() => this.saveInformation()}
          >
            保存
          </Button>
        </Space>
      </Spin>
    )
  }
})
